<template>
	<view class="home_content">
		<!-- topNavBar -->
		<topNavBar :isFixed="true" :placeholder="true" :showFreeLayout="true" :showGaussianBlur="activeGaussianBlur"
			:height="isHeight" ref="refNavBar" navBarBacColor="transparent">
			<template v-slot:freeLayout>
				<topNavBarTitle maxText="随机壁纸" minText="随机获取某个分类壁纸" />
			</template>
		</topNavBar>

		<!-- tabs -->
		<my-tabs :fixedTop="fixedTop" :showTabs="isShowTabs" />

		<!-- swiper -->
		<view class="home_content_swiper">
			<u-swiper :list="swiperList" keyName="img" :circular="true" :autoplay="true" previousMargin="30"
				nextMargin="30" height="180" radius="5" bgColor="transparent" easingFunction="linear" />
		</view>

		<!-- 壁纸分类-->
		<scrollList class="scrollList" />

		<!-- 内容滚动区域 -->
		<view class="home_content_scrollView" :style="{padding: `0rpx ${initPadding_lr}rpx`}">
			<scrollView :onReachBottom="onReachBottom" :imageLists="imagesList" ref="scrollView_ref" />
		</view>

		<!-- backTop -->
		<my-backTop :scrollTop="indexPage_scrollTop" :showTop="600" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认不开启磨砂背景
				activeGaussianBlur: false,
				indexPage_scrollTop: 0,
				isShowTabs: false,
				isScrollListTop: 0,
				isHeight: 65
			}
		},
		onLoad() {
			this.$store.dispatch('get_randomWallpaper', {
				limit: 6, // 返回数量
				first: 0, // 起始数目
				skip: 180, // 略过数量
				adult: false,
				order: 'hot'
			});
			this.$store.dispatch('get_typeWallpaper');
			this.$refs.scrollView_ref.getImageList();
		},
		onPageScroll(e) {
			e.scrollTop > 1 ? this.activeGaussianBlur = true : this.activeGaussianBlur = false;
			e.scrollTop >= this.isScrollListTop ? this.isShowTabs = true : this.isShowTabs = false
			this.indexPage_scrollTop = e.scrollTop;
		},
		methods: {
			// 触底事件
			onReachBottom() {
				this.$refs.scrollView_ref.getBottomFn()
			},
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.scrollList').boundingClientRect(data => {
				this.isScrollListTop = data.top + data.height
			}).exec();
		},
		computed: {
			// 全局左右内边距
			initPadding_lr() {
				return this.$globalStyle.globalPadding_lr;
			},
			swiperList() {
				return this.$store.state.isRandomWallpaper;
			},
			imagesList() {
				return this.$store.state.isHomeRandomWallpaperList;
			},
			fixedTop() {
				return `${this.$store.state.ccurrentStateBarTop + this.isHeight}px`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home_content {
		width: 100%;
		background-color: #fff;

		&_swiper {
			width: 100%;
			padding: 26rpx 0;
		}

		&_scrollView {
			box-sizing: border-box;
			width: 100%;
		}

	}
</style>
